<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="type === 'add' ? g_t('fleet.createCustomer') : '编辑客户'"
    width="850px"
    style="width: 850px"
    :before-close="handleClose"
  >
    <el-form
      ref="refDialogForm"
      v-loading="formLoading"
      class="set-dialog-form"
      :label-width="language === 'en' ? '180px' : '85px'"
      :model="formData"
      :rules="rules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('fleet.customerName')" prop="customerName">
            <TextInput
              v-model="formData.customerName"
              :maxlength="32"
              :label="$t('fleet.customerName')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('fleet.customerContact')"
            :label-width="language === 'en' ? '180px' : '120px'"
            prop="customerContact"
          >
            <TextInput
              v-model="formData.customerContact"
              :maxlength="32"
              :label="$t('fleet.customerContact')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('fleet.contactPhone')"
            prop="customerContactPhone"
          >
            <InputPhone
              v-model="formData.customerContactPhone"
              :label="$t('fleet.contactPhone')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('fleet.customerEmail')"
            :label-width="language === 'en' ? '180px' : '120px'"
            prop="customerContactEmail"
          >
            <TextInput
              v-model="formData.customerContactEmail"
              :label="$t('fleet.customerEmail')"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            :label="$t('fleet.emergencyContact')"
            prop="customerEmergencyContact"
          >
            <TextInput
              v-model="formData.customerEmergencyContact"
              :maxlength="32"
              :label="$t('fleet.emergencyContact')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            :label="$t('fleet.emergencyContactPhone')"
            :label-width="language === 'en' ? '180px' : '120px'"
            prop="customerEmergencyContactPhone"
          >
            <InputPhone
              v-model="formData.customerEmergencyContactPhone"
              :label="$t('fleet.emergencyContactPhone')"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item :label="$t('public.remark')" prop="note">
            <TextInput
              v-model="formData.note"
              type="textarea"
              :rows="2"
              :label="$t('public.remark')"
            />
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>
    <template #footer>
      <div class="form-dialog-footer">
        <el-button plain @click="handleClose">{{
          $t('public.cancel')
        }}</el-button>
        <el-button type="primary" @click="handleSubmitForm">{{
          $t('public.confirm')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: 'add' // add | edit
  },
  id: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const { language } = storeToRefs(useAppStore())
const refDialogForm = ref(null)
const formLoading = ref(false)
const formData = ref({
  customerName: '',
  customerContact: '',
  customerContactPhone: '',
  customerContactEmail: '',
  customerEmergencyContact: '',
  customerEmergencyContactPhone: '',
  note: ''
})
const rules = {
  customerName: g_rules.commonInputText(g_t('fleet.customerName')),
  customerContact: g_rules.commonInputText(g_t('fleet.customerContact')),
  customerContactPhone: g_rules.phone({
    label: g_t('fleet.contactPhone')
  }),
  customerContactEmail: g_rules.email({
    label: g_t('fleet.customerEmail'),
    required: false
  }),
  // customerEmergencyContact: g_rules.commonInputText(
  //   g_t('fleet.emergencyContact')
  // ),
  customerEmergencyContactPhone: g_rules.phone({
    label: g_t('fleet.emergencyContactPhone'),
    required: false
  })
  // note: g_rules.commonInputText(g_t('public.remark'))
}

onMounted(() => {
  props.type === 'edit' && getFormData()
})

const getFormData = () => {
  formLoading.value = true
  g_api.customer
    .apiCustomerQueryDetail({ id: props.id })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        formData.value = data
      }
    })
    .finally(_ => {
      formLoading.value = false
    })
}

const handleClose = _ => {
  dialogVisible.value = false
}

const handleSubmitForm = () => {
  if (formLoading.value) return
  refDialogForm.value.validate(valid => {
    console.log('formData.value', formData.value)
    if (!valid) return
    formLoading.value = true
    const urlMethod =
      props.type === 'add'
        ? g_api.customer.apiCustomerCreate
        : g_api.customer.apiCustomerUpdate
    urlMethod(formData.value)
      .then(res => {
        if (res.code === '200') {
          ElMessage({
            message: res.message,
            type: 'success'
          })
          handleClose()
          emit('update')
        }
      })
      .finally(() => {
        formLoading.value = false
      })
  })
}
</script>

<style scoped lang="scss"></style>
